<template>
	<view class="content" :style="{paddingTop: titleTop + 'px'}">
		<image class="indexBg" src="/static/hot/hotBg.png" mode="widthFix"></image>
		<view class="mainHeader" :style="{minHeight: statusBarHeight+'px'}">
			<returnIcon></returnIcon>
		</view>
		<view class="titleLay">
			<view class="title">
				WHATS NEW
			</view>
			<!-- 3个热门一个页面，带参数进来判断 -->
			<image src="/static/hot/hotTitle.png" class="titleImg" mode="widthFix" v-if="urlType==1"></image>
			<image src="/static/hot/hotTitle_3.png" class="titleImg" mode="widthFix" v-if="urlType==2"></image>
			<image src="/static/hot/hotTitle_2.png" class="titleImg" mode="widthFix" v-if="urlType==3"></image>
		</view>
		<view class="options">
			<view :class="index==optionIndex?'option action':'option'" @click="optionIndexFn(index)"
				v-for="(item,index) in option" :key="index">
				{{item.name}}
			</view>
		</view>
		<scroll-view style="height: 1060rpx;position: relative;
		z-index: 3;" :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true" @scroll="scroll"
				:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="#F8F2F6"
				@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				@refresherabort="onAbort" @scrolltolower="scrolltolower">
			<view class="pictureLay">
				<noData v-if="machinesList.length === 0 && !loading"></noData>
				<template v-else>
				<view class="pictureItem" v-for="(item,index) in machinesList" :key="index">
					<view class="date">
						<text>23</text>/06月
					</view>
					<pictureDisplay :dataItem="item" v-if="item.showtype==1"></pictureDisplay>
					<pictureDisplayTow :dataItem="item" v-else></pictureDisplayTow>
				</view>
				<!-- 使用uni-load-more组件显示加载状态 -->
				<uni-load-more :status="loading ? 'loading' : noMoreData ? 'noMore' : 'more'" iconType="auto"></uni-load-more>
				
				</template>
				<!-- <view class="pictureItem">
					<view class="date">
						<text>22</text>/06月
					</view>
					<pictureDisplayTow></pictureDisplayTow>
				</view> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: [{
					name: '扭蛋',

				}, {
					name: '直购',

				}],
				optionIndex: 0,
				urlType:0,//0=默认,全部,1=最新上架,2=今日热门,3=本月热门
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				triggered: false,
				_freshing: false,
				machinesList: [],
				page: 1, // 当前页码
				page_size: 5, // 每页数量
				total: 0, // 总数据量
				loading: false, // 是否正在加载
				noMoreData: false // 是否没有更多数据
			}
		},
		onLoad(e) {
			this.urlType=e.type;
		},
		async onShow() {
			await this.$onLaunched;
			this.resetList()
		},
		// onShareAppMessage(res) {
		// 	return {
		// 		title: "给你分享了一份宝藏，快进来看看～",
		// 		path: '/pages/index/index',
		// 		imageUrl: '../../static/share.png'
		// 	};
		// },
		methods: {
			optionIndexFn(index){
				this.optionIndex=index;
				this.resetList()
			},
			//自定义下拉刷新控件被下拉
			onPulling(e) {
				// console.log("onpulling", e);
				// this.page = 1;
				// this.noMoreData = false;
				// this.getMachinesListFn();
			},
			// 自定义下拉刷新被触发	
			onRefresh() {
				console.log("onRefresh");
				let that = this;
				if (this._freshing) return;
				// 1. 设置刷新状态
				this._freshing = true;
				this.triggered = true;
				// 2. 重置分页参数
				// 3. 重新加载数据
				this.resetList();
				// 4. 无论成功失败，2秒后复位刷新状态
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000);
			},
			// 自定义下拉刷新被复位	
			onRestore() {
				this.triggered = false;
				this._freshing = false;
				// this.triggered = false // 'restore'; // 需要重置
				console.log("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.log("onAbort");
			},
			// 滚动到底部/右边，会触发 scrolltolower 事件	
			scrolltolower: function(e) {
				console.log(e);
				// 如果没有更多数据或正在加载，则返回
				if (this.noMoreData || this.loading) return
			
				// 页码增加并获取下一页数据
				this.page++
				this.getMachinesListFn()
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 回到顶部，目前没用，感觉可以优化流程
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
// 重置列表（用于下拉刷新）
			resetList() {
				this.page = 1
				this.noMoreData = false
				this.getMachinesListFn()
			},
			getMachinesListFn() {
				// 防止重复请求
				if (this.loading) return;

				// 设置加载状态
				this.loading = true;
				uni.showLoading({
					title: '加载中...'
				})
				try {
					this.$http('/v1/machines/list', {
						page: this.page,
						page_size: this.page_size,
						machine_type: this.optionIndex,
						// category: 1,
						// style: 1,
						type: this.urlType,
						// shop_id: 2
					}).then(res => {
						console.log(res);
						if (res.code === 0) {
							const
								data = res.data;
							// 如果是第一页，直接赋值
							if (this.page === 1) {
								this.machinesList = data.list || []
							} else {
								// 后续页，合并数据
								this.machinesList = [...this.machinesList, ...(data.list || [])]
							}

							// 更新总数据量
							this.total = data.total || 0

							// 判断是否还有更多数据
							this.noMoreData = this.machinesList.length >= this.total
							// this.machinesList = res.data.list;
						
						// 把下拉状态复位
						this.triggered = false;
						this._freshing = false;
						} else {
							this.$showToast(res.msg)
						}
					})

				} catch (error) {
					console.error('请求失败:', error)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				} finally {
					// 重置加载状态
					this.loading = false
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			},


		}
	}
</script>
<style>
	page {
		background-color: #F8F2F6;
	}
</style>
<style lang="scss" scoped>
	.indexBg {
		width: 100vw;
		height: 0;
		position: fixed;
		z-index: -2;
		top: 0;
	}

	.mainHeader {
		padding-left: 38upx;
		margin-bottom: 26upx;
	}

	.titleLay {
		padding-left: 46upx;

		.title {
			font-family: AlimamaFangYuanTiVF;
			font-weight: bold;
			font-size: 38rpx;
			color: #454545;
			margin-bottom: 4upx;
		}

		.titleImg {
			@include setwh(380upx, 0)
		}
	}

	.options {
		@include flexLayout(center);
		margin: 114upx 0 24upx 84upx;

		.option {
			font-family: AlimamaFangYuanTiVF;
			font-weight: bold;
			font-size: 34rpx;
			color: #8B8B8B;
			line-height: 42rpx;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 8rpx;
				background: none;
				border-radius: 4rpx;
				@include positionCenter;
				top: 54upx;
				transition: width .5s;
			}

			&+.option {
				margin-left: 60upx;
			}
		}

		.action {
			font-weight: bold;
			color: #000000;
			transition: color 1s 1s;
			transition-delay: 2s;
			transition: all 1s;

			&:after {
				content: '';
				width: 50rpx;
				background: linear-gradient(90deg, #FF85B8 0%, #FFC9AF 100%);
			}
		}
	}

	.pictureLay {
		width: 700upx;
		margin: 0 auto;
		.pictureItem {
			padding-bottom: 64upx;

			.date {
				font-family: AlimamaFangYuanTiVF;
				font-size: 22rpx;
				color: #454545;
				padding-left: 16upx;
				padding-bottom: 16upx;
				text {
					font-weight: bold;
					font-size: 34rpx;
					padding-right: 10upx;
				}
			}
		}
	}
</style>